<template>
	<div class="cus-time">
		<div class="item-con d-flex" @click="changeShow">
			<el-input readonly :placeholder="placeholder" v-model="time" />
			<i class="el-icon-caret-bottom icon"></i>
		</div>
		<van-popup v-model="popShow" round position="bottom">
			<van-datetime-picker
				:type="type"
				v-model="currentDate"
				:min-date="minDate"
				:max-date="maxDate"
				:filter="type == 'date' ? dateDefault : dateFilter"
				@confirm="confirm"
				@cancel="cancel"
			/>
		</van-popup>
	</div>
</template>

<script>
import dayjs from "dayjs";
import { DatetimePicker, Popup } from "vant";
export default {
	props: {
		value: [String, Number],
		type: String,
		placeholder: String,
		filt: {
			type: Boolean,
			default: false
		}
	},
	components: {
		VanDatetimePicker: DatetimePicker,
		VanPopup: Popup
	},
	data() {
		return {
			popShow: false,
			currentDate: new Date(),
			time: ""
		};
	},
	computed: {
		minDate() {
			if (this.type == "date") {
				let yesterday = new Date();
				yesterday.setDate(yesterday.getDate() - 1);
				return yesterday;
			} else {
				return new Date();
			}
		},
		maxDate() {
			let now = dayjs();
			if (this.type == "date") {
				return now.toDate();
			}
			return now.add(50, "year").toDate();
		}
	},
	methods: {
		dateFilter(type, options) {
			if (type === "minute") {
				return options.filter(option => option % 30 === 0);
			}
			return options;
		},
		dateDefault(type, options) {
			return options;
		},
		changeShow() {
			this.popShow = true;
		},
		confirm(e) {
			let time = "";
			if (this.type == "date") {
				time = dayjs(e).format("YYYY-MM-DD");
			} else {
				time = dayjs(e).format("YYYY-MM-DD HH:mm");
			}
			this.time = time;
			this.$emit("input", time);
			this.popShow = false;
		},
		cancel() {
			this.popShow = false;
		}
	},
	mounted() {
		if (this.filt) {
			this.time = dayjs().format("YYYY-MM-DD");
		}
	}
};
</script>

<style lang="scss" scoped>
.d-flex {
	display: flex;
}
.cus-time {
	.item-con {
		align-items: center;
		padding-bottom: 0.2rem;
		border-bottom: 1px solid #dfdfdf;
		.icon {
			color: #999;
		}
	}
}
</style>
